<template>
	<div>
		<template 
			v-for="(field, index) in model.fields"
			v-if="field.display && field.summary && currentValue[field.tableName] !== '' && currentValue[field.tableName] != null"
		>
			<template v-if="field.type == types.images">
				<span>{{ field.label }}: </span><wt-images 
					:value="currentValue[field.tableName]"
					class="wt-summary-images"
				></wt-images>
			</template>
			<template v-else>
				<span>{{ field.label }}: {{ getDisplay(field) }}</span>
			</template>
		</template>
	</div>
</template>
<script>
	/**
		病例概要信息
	 */
	import Vue from 'vue'
	import ElementUI from 'element-ui'
	import Fields from '../utils/wt-model-field'
	import FormUtils from '../utils/wt-form-utils'
	import ModelUtils from '../utils/wt-model-utils'

	Vue.use(ElementUI);

	export default {
		name: 'wt-model-summary',
		props: {
			model: {
				type: Object,
				required: true
			},
			value: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				currentValue: this.value,
				types: Fields.types
			}
		},
		watch: {
			'value'(val, oldValue) {
				if (this.currentValue === val) return;
				this.currentValue = val;
			}
		},
		methods: {
			getDisplay(field) {
				return ModelUtils.formatFieldDisplay(this.currentValue, field);
			}
		}
	}

</script>